<template>
    <div>
        <div class="Topstory-container">
            <div class="Topstory-mainColumn">
                <div class="Card">
                    <div class="TopstoryTabs Topstory-tabs pointer">


                        <div class="TopstoryTabs-link Topstory-tabsLink" :class="active == 2 ? 'is-active' : ''"
                            @click="tabChange(2)">最新</div>
                        <div class="TopstoryTabs-link Topstory-tabsLink" :class="active == 3 ? 'is-active' : ''"
                            @click="tabChange(3)">最热</div>
                        <div class="TopstoryTabs-link Topstory-tabsLink" :class="active == 4 ? 'is-active' : ''"
                            @click="tabChange(4)">官方精选</div>

                    </div>
                </div>
                <div class="Topstory-content">

                    <el-pagination-box ref="PaginationBox" :where="where" url="/Topic/List">
                        <template v-slot:content="{ data }">

                            <div class="list Card">
                                <div class="TopstoryItem" v-for="(item, index) in data " :key="item.Id"
                                    @click="TopicClick(item)">
                                    <h2 class="ContentItem-title">{{ item.Title }}</h2>
                                    <div class="margin-top-xs AuthorInfo" v-if="item.CreatorAppUserDto">
                                        <img class="AuthorInfo-avatar"
                                            :src="item.CreatorAppUserDto.ImageUrls | ReplaceImageHttpFilter">
                                        <div class="margin-left-xs AuthorInfo-name ">{{ item.CreatorAppUserDto.Name
                                            }}</div>
                                        <div class="margin-left-xs flex-sub AuthorInfo-badgeText">{{
                                            item.CreatorAppUserDto.Introduce }}
                                        </div>
                                    </div>
                                    <div class="flex align-center ">

                                        <div style="width:100% font-size: 18px;letter-spacing: 1px;color:gray;margin-top:12px"
                                            class="content-cut flex-sub">{{
                                                item.Content | RepalceHtml }}</div>
                                        <el-image v-if="item.Cover"
                                            style="width: 70px; height: 70px;border-radius: 5px;margin-right:10px;"
                                            :src="item.Cover | ReplaceImageHttpFilter" fit="fit"></el-image>

                                    </div>
                                    <div div class=" ContentItem-time">发布于:{{ item.CreationTime }}
                                    </div>
                                    <div class="flex margin-top-xs align-center">
                                        <el-button type="primary" size="mini">{{ item.ViewCount }} 次浏览</el-button>
                                        <div class="margin-left-xs text-gray">{{ item.CommentDtos.length }}<span
                                                class="margin-left-xs">条评论</span></div>

                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-pagination-box>

                </div>
            </div>
            <div class="side">

                <RecommendAuthorListCard></RecommendAuthorListCard>

            </div>

        </div>

    </div>
</template>

<script>

import RecommendAuthorListCard from "@/views/Components/RecommendAuthorListCard.vue"

import router from '@/router';
import { mapGetters } from 'vuex'
export default {
    components: { RecommendAuthorListCard },
    name: 'Home',
    computed: {
        ...mapGetters([
            'name', 'roleTypeFormat', 'avatar', 'loginTimePeriod', "user"
        ])
    },

    data() {
        return {
            active: 2,
            where: {
                AuditStatus: 1,
            },
            TopicList: [],
            TopicTypeList: []

        };
    },
    beforeMount() {
        this.where.TopicTypeId = this.$route.query.TopicTypeId;

    },
    mounted() {

    },
    methods: {
        async TopicListApi(where) {
            let { Data: { Items } } = await this.$Post(`/Topic/List`, { ...this.where, ...where });
            this.TopicList = Items;
        },
        async GetMyFirendTopicListApi() {
            let { Data: { Items } } = await this.$Post(`/Topic/GetMyFirendTopicList`, this.where);
            this.TopicList = Items;
        },
        async RecommendTop10Api(where) {
            let { Data: { Items } } = await this.$Post(`/Topic/RecommendTop10`, {});
            this.TopicList = Items;
        },
        async TopicTypeListApi(where) {
            let { Data: { Items } } = await this.$Post(`/TopicType/List`, {});
            this.TopicTypeList = Items;
        },
        async tabChange(e) {
            this.active = e;


            if (this.active == 2) {
                this.$refs.PaginationBox.Reload({ TopicTypeId: this.where.TopicTypeId, AuditStatus: 1, IsNew: true })

            }
            else if (this.active == 3) {

                this.$refs.PaginationBox.Reload({ TopicTypeId: this.where.TopicTypeId, AuditStatus: 1, IsHot: true })

            }
            else if (this.active == 4) {
                this.$refs.PaginationBox.Reload({ TopicTypeId: this.where.TopicTypeId, AuditStatus: 1, IsRecommand: true })

            }

        },

        TopicClick(item) {
            this.$router.push({
                path: `/Client/TopicDetail`, query: {
                    TopicId: item.Id,

                }
            });
        }
    }


}
</script>

<style lang="scss" scoped>
.Topstory-container {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 10px auto;
    padding: 0 16px;
    position: relative;
    width: 1300px;
}

.Topstory-mainColumn {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-bottom: 0;
    margin-right: 10px;
    width: 994px;
}

.Card {
    background: #fff;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 3px hsla(0, 0%, 7%, .1);
    box-shadow: 0 1px 3px hsla(0, 0%, 7%, .1);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    // margin-bottom: 10px;
    overflow: hidden;
}

.Topstory-tabs {
    border-bottom: 1px solid #f8f8fa;
}

.TopstoryTabs {
    height: 58px;
    display: flex;
}

.TopstoryTabs-link {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 16px;
    margin: 0 22px;
}

.TopstoryTabs-link.is-active {
    font-weight: 500;
    color: #1772f6;
}

.TopstoryItem {
    border-radius: 0;
    outline: none;
    overflow: visible;
    overflow: initial;
    padding: 16px 20px;
    position: relative;
    border-bottom: 1px solid #f8f8fa;
    padding-bottom: 30px;
}

.ContentItem-title {
    margin-bottom: -4px;
    margin-top: -4px;
    word-break: break-word;
    color: #191b1f;
    line-height: 1.6;
    font-size: 18px;
    font-synthesis: style;
    font-weight: 600;
}

.AuthorInfo {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    max-width: 654px;
    position: relative;
}

.AuthorInfo-avatar {
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    max-width: 100%;
    background-color: rgb(255, 255, 255);
    width: 24px;
    height: 24px;
    border-radius: 2px;
}

.AuthorInfo-name {
    font-synthesis: style;
    font-weight: 600;
}

.AuthorInfo-badgeText {
    color: #535861;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ContentItem-time {
    color: #8491a5;
    font-size: 14px;
    margin-top: 10px;
}

.content-cut {

    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;

    line-height: 1.2em;
}

.RightSideBar {
    width: 296px;
    -webkit-align-self: normal;
    -ms-flex-item-align: normal;
    align-self: normal;
}

.CreatorEntrance {
    height: 52px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
}
</style>
